<template>
  <el-card class="box-card">
    <el-row slot="header" class="clearfix" style="height: 40px">
      <el-col :span="12">
        <h3>{{ name }}</h3>
        <h3 v-if="!name">缴费列表</h3>
      </el-col>
      <el-col :span="12">
          <span style="float: right; ">
              <el-button plain type="primary" @click="addPay">添加缴费</el-button>
          </span>
      </el-col>
    </el-row>
    <div class="text item">
      <el-table :data="hydropowerPage" @row-click="payData">
        <el-table-column label="缴费类型" prop="type"></el-table-column>
        <el-table-column label="金额" prop="amount"></el-table-column>
        <el-table-column label="时间" prop="timestamp.timeString"></el-table-column>
        <el-table-column label="删除">
          <el-button plain type="danger" @click="del">删除缴费</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page.sync="pagePaging.page"
          :page-size.sync="pagePaging.size"
          :total="total"
          background
          layout="prev, pager, next,jumper"
          @current-change="page"
          style="margin-top: 20px"
      >
      </el-pagination>
    </div>
    <!--    缴费修改弹窗-->
    <el-dialog :visible.sync="updateVisible" title="修改缴费" width="30%">
      <pay-dialog :update="updateData" @success="updateVisible = false;page();"/>
    </el-dialog>
    <!--    添加缴费弹窗-->
    <el-dialog :visible.sync="addPayVisible" title="缴费" width="30%">
      <pay-dialog :buttonName="'添加缴费'" :update="updateData" :uuid="pagePaging.condition.companyUuid"
                  @success="addPayVisible = false;page();"/>
    </el-dialog>
  </el-card>
</template>

<script>
import {copyObj, Unicom} from "../../../../common/utils";
import PayDialog from "../payForm";
import {delectPayment, queryPayment, updatePayment} from "../../../../network/hydropowerApi";

export default {
  name: "hydropowerQuery",
  components: {PayDialog},
  data() {
    return {
      hydropowerPage: null,
      addPayVisible: false,
      updateVisible: false,
      total: null,
      pagePaging: {
        page: 1,
        size: 10,
        condition: {
          companyUuid: null,
          type: null,
        }
      },
      updateData: {
        amount: null,
        type: null,
        uuid: null,
        companyUuid: null
      },
      name: ''
    }
  },
  mounted() {
    this.receive();
    this.page()
    Unicom.$on('queryHydropowerBillUuid', res => {
      this.pagePaging.condition.companyUuid = res.uuid;
      this.name = res.name;
      this.page();
    })
  },
  methods: {
    //添加缴费
    addPay() {
      if (!this.pagePaging.condition.companyUuid) {
        this.$message({
          message: "请点击需缴费的公司",
          type: "error"
        })
      } else {
        if (this.updateData !== undefined) {
          this.updateData.amount = ""
          this.updateData.type = ""
        }
        this.addPayVisible = true
      }
    },
    //获得缴费数据
    payData(row, column) {
      this.updateData = copyObj(row)
      console.log(this.updateData)
      if (column.label !== '删除') {
        this.updateVisible = true
      }
    },

    paymentUpdate() {
      updatePayment(this.updateData).then(res => {
        if (res.code === 2000) {
          this.updateVisible = false;
          this.page();
        } else {
          this.$message({
            message: res.message,
            type: "error"
          })
        }
      })
    },
    receive() {
      Unicom.$on('data1', (() => {
        this.name = null
        this.pagePaging.condition.companyUuid = null
        this.page();
      }))
    },
    page() {
      queryPayment(this.pagePaging).then(res => {
        this.hydropowerPage = res.data.records;
        this.total = res.data.total;
      })
    },
    del() {
      this.$confirm('确定删除此缴费记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delectPayment(this.updateData.uuid).then(res => {
          console.log(res);
          if (res.code === 2000) {
            this.page();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  /*width: 760px;*/
  width: 100%;
}
</style>